<template>
  <form method="post" action="">
     UserId:<input type="text" v-model="data.userId"><br>
     账号:<input type="text" v-model="data.username"><br>
     密码:<input type="text" v-model="data.password"><br>
     <input type="submit" value="提交" @click.prevent="jwt">
  </form>

  <a href="#" @click="queryByJwt">请求后台,携带token</a>
</template>

<script setup>
import {reactive} from "vue"
import axios from "axios"
import qs from "qs"
let data =reactive({
  userId:"",username:"",password:""
})

let jwt =()=>{
  console.log(JSON.stringify(data));
     axios.post("http://localhost:8080/login",qs.stringify(data)).then(res=>{
       console.log(res)
       //前端存储token
       localStorage.setItem("token",res.data)
     })
}
let tokenData={
  token:localStorage.getItem("token")
}
let queryByJwt=()=>{
 
    axios.get("http://localhost:8080/list",{headers:{Authorization:localStorage.getItem("token")}}).then(res=>{
      console.log(res);
    })
}



</script>

<style lang="scss" scoped>

</style>